<template>
  <div style="height: 100%;">
    <el-container>
      <el-aside :width="asideWidth">
        <div class="logo">
          <img src="@/assets/logo.png" alt="" height="40">
          <span v-show="!isCollapse">Vue element-ui后台管理</span>
        </div>
        <an-menu :isCollapse="isCollapse"/>
      </el-aside>
      <el-container>
        <el-header>
          <div class="left">
            <i class="el-icon-s-fold" @click="toExpand" style="font-size: 24px;color: #666;" v-if="!isCollapse"></i>
            <i class="el-icon-s-unfold" @click="toExpand" style="font-size: 24px;color: #666;" v-else></i>
          </div>
          <div class="right-user">
            <el-dropdown>
              <div style="height: 60px;display: flex;align-items: center;">
                <el-avatar icon="el-icon-user-solid"/>
                <span class="username">Hillary</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
                <el-dropdown-item icon="el-icon-setting">设置</el-dropdown-item>
                <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <div class="menu-window">
          <el-tag
            v-for="(item, index) in wins"
            :key="index"
            effect="plain"
            :disable-transitions="true"
            size="medium"
            :type="activeIndex === index ? '' : 'info'"
            @click="$router.push(item.path)"
            @close="closeWin(index)"
            closable>
            {{ item.title }}
          </el-tag>
        </div>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import anMenu from '@/an-ui/menu'
export default {
  name: 'layout',
  data () {
    return {
      isCollapse: false,
      asideWidth: '260px',
      wins: [
        {title: '主页', path: '/desktop'}
      ], // 全部窗口 {title: '', path: ''}
      winsPath: ['/desktop'], // 对应wins索引 '/path'
      activeIndex: 0
    }
  },
  methods: {
    toExpand () {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.asideWidth = '70px'
      } else {
        this.asideWidth = '260px'
      }
    },
    closeWin (index) {
      let l = this.wins.length
      this.wins.splice(index, 1)
      this.winsPath.splice(index, 1)
      if (index < this.activeIndex) {
        this.activeIndex--
      } else if (index === this.activeIndex) {
        if (index === l - 1) {
          this.activeIndex = l - 2
        }
        this.$router.push(this.winsPath[this.activeIndex])
      }
    }
  },
  components: {
    anMenu
  },
  created () {
    this.$router.beforeEach((to, from, next) => {
      let index = this.winsPath.indexOf(to.path)
      if (index === -1) {
        // 不存在
        this.wins.push({
          title: to.meta.name,
          path: to.path
        })
        this.winsPath.push(to.path)
        this.activeIndex = this.wins.length - 1
      } else {
        // 存在
        this.activeIndex = index
      }
      next()
    })
  }
}
</script>

<style scoped>
  .el-header{
    box-shadow: 10px 0 10px #ddd;
  }
  .el-main{
    background-color: #fff;
    margin-left: 10px;
    padding-left: 10px;
  }
  .el-container{
    height: 100%;
  }
  .el-aside{
    background-color: #191a23;
    color: hsla(0,0%,100%,.7);
    box-shadow: 2px 0 6px rgba(0,21,41,.35);
    transition: all .3s;
  }
  .logo{
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .logo span{
    white-space:nowrap;
  }
  .left{
    height: 100%;
    display: flex;
    align-items: center;
    float: left;
  }
  .right-user{
    float: right;
  }
  .right-user .username{
    margin-left: 10px;
    font-size: 14px;
  }
  .menu-window{
    height: 34px;
    min-height: 34px;
    margin: 10px;
    background-color: #f5f7f9;
    display: flex;
    width: calc(100% - 20px);
    align-items: center;
  }
  .el-tag{
    cursor: pointer;
    margin-left: 10px;
  }
</style>
